<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
<th:block data-th-replace="/adminlte/base::base-head"></th:block>
<link rel="stylesheet" href="/kaibes/vditor/index.min.css?v=3.8.4" />
</head>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">
    <th:block data-th-replace="/adminlte/base::base-navbar"></th:block>
    <th:block data-th-replace="/adminlte/base::base-main-sidebar"></th:block>
    <div class="content-wrapper">
        <th:block data-th-replace="/adminlte/base::base-content-header"></th:block>
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-9">
                        <div class="form-horizontal">
		                    <input id="template-key" type="hidden" th:value="${template.key}">
		                    <input id="template-create-time" type="hidden" th:value="${template.createTime}" th:if="${template.createTime!=null}">
		                    <div class="form-group">
		                        <div class="col-sm-12">
		                            <input type="text" class="form-control input-lg" 
		                               name="title" placeholder="请输入标题" id="template-title"
		                                th:value="${template.title}">
		                        </div>
		                    </div>
		                    <div class="form-group">
		                        <div class="col-sm-12">
		                            <div id="vditor"></div>
		                        </div>
		                    </div>
		                </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="card">
                            <div class="card-body ">
                                <button type="button" class="btn btn-primary w-100" onclick="saveTemplate()">保存模板</button>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header ">
                                <h3 class="card-title">备注</h3>
                            </div>
                            <div class="card-body">
                                <textarea id="template-remark" class="form-control" name="tags" th:utext="${template.remark}" rows="10"></textarea>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header ">
                                <h3 class="card-title">提示</h3>
                            </div>
                            <div class="card-body">
                                <div>
                                    <font>1. 使用 </font>
                                    <font size="5" color="red">$</font>
                                    <font> 可以联想变量</font>
                                </div>
                                <div>
                                    <font>2. 在</font>
                                    <font size="5" color="red">标题</font>
                                    <font>上使用变量需要使用</font>
                                    <font size="5" color="red">th:block</font>
                                    <font>标签代替font标签</font>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <div style="display: none;" id="variables" th:text="${template.variables}"></div>
    <div style="display: none;" id="emailContent" th:text="${template.emailContent}"></div>
    <th:block data-th-replace="/adminlte/base::base-footer"></th:block>
    <th:block data-th-replace="/adminlte/base::base-control-sidebar"></th:block>
</div>
<script src="/kaibes/vditor/index.min.js?v=3.8.4"></script>
<script src="mail-vditor.js"></script>
<script type="text/javascript">
	document.addEventListener('keydown', function(e){
	    if (e.keyCode == 83 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)){
	        e.preventDefault();
	        saveTemplate();
	     }
	});

	function saveTemplate() {
	    Vditor.md2html(vditor.getValue()).then(data=>{
	        let template = new Object();
	        template.title = $("#template-title").val();
	        template.remark = $("#template-remark").val();
	        template.emailContent = vditor.getValue();
	        template.html = data;
	        
	        let createTime = $("#template-create-time").val();
	        if (createTime == undefined) {
	        	 template.key = $("#template-key").val();
	        	 post("/emails/templates", template, (status, data, headers) => toast.success(getMessage(headers), reload), (status, data, headers) => toast.failure(getMessage(headers)));
            } else {
                put("/emails/templates/"+$("#template-key").val(), template, (status, data, headers) => toast.success(getMessage(headers), reload));
            }
	    });
	}
	
    	var myList = [];
    	let variables = $("#variables").text();
    	for(var i = 0; i < variables.length; i++) {
    		myList[i] = {html:"<a>"+variables[i].name+"</a>", value:'<font color="blue" th:utext="${'+variables[i].value+'}">'+variables[i].name+'</font>'};
    	}
    	vditor.create('vditor', 1100, 100000, myList);
        window.onload = function (){ 
            vditor.get.setValue($("#emailContent").text());
        }
    </script>
</body>
</html>